@charset 'utf-8';

*{margin: 0;padding: 0}
html{
    width: 100%;
    height:100%;
}

ul li{
    list-style: none
}

body{
    background:#023b3b url('../img/bg4.png') no-repeat center;
    height:100%;
    background-size: cover;
    overflow: hidden;
    perspective: 800px;
}

#main{
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%,-50%); */

    transform-style: preserve-3d;/*变换风格3d*/
    transform:translateZ(-2000px) rotateX(0deg) rotateY(0deg);
}

#main li{
    width: 120px;
    height: 160px;
    background-color: rgba(0, 127, 127, .5);
    border: 1px solid rgba(127,255,255,.25);
    box-shadow: 0 0 12px rgba(0, 255, 255, .5);

    position: absolute;
    top: -80px;
    left: -60px;
    /* transform: translate(-50%,-50%); */

    transition: 4s ease-in-out;

    text-align: center;
    line-height: 160px;
    font-size: 50px;
    font-weight: bold;
    color: rgba(255, 255, 255, .7);
    font-family: '微软雅黑'
}
#main li:hover{
    border: 1px solid rgba(127,255,255,.75);
    box-shadow: 0 0 12px rgba(0, 255, 255, .75);
    cursor: pointer;
}

#styleBtn{
    /* width: 290px; */
    height: 40px;
    position: fixed;
    bottom: 15px;
    left: 15px;
}
#styleBtn li{
    color: rgba(127, 255, 255, .75);
    border: 1px solid rgba(127, 255, 255, .75);
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    float: left;
    cursor:pointer;
    border-radius: 3px;
    margin: 0 5px;
}

#styleBtn li:hover{
    background: rgba(0, 255, 255, .5)
}


